<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
</head>

<style>

    hr{

        background-color: red;
        border: none;
        height: 1px;
    }

    div{

        margin-top: 10px;
        margin-bottom: 10px;

    }


    #div1
    {
        /*字体颜色 : color: brown; color: #00ff00; color: rgba(0,0,0,1);*/
        color: brown;

        /*文本对齐方式:center;right; */
        text-align:center ;



    }


</style>

<body>

<h2>文本相关属性</h2>
<hr>

<div id="div1" style="width: 100%;height: 200px; background-color: #8cebff">

    这是一个文本
</div>


<h2>文本修饰</h2>
<hr>

<div id="div2" style="text-decoration: overline;text-decoration-color: red">
    顶部有一条线
</div>

<div id="div3" style="text-decoration: line-through;text-decoration-color:yellowgreen">
中部有一条线
</div>

<div id="div4" style="text-decoration: underline;text-decoration-color:orange">
    中部有一条线
</div>

<h2>文本转换</h2>
<hr>

<P>原文本:This is some text</P>
<p id="p1" style="text-transform: uppercase;">This is some text</p>
<p id="p2" style="text-transform: lowercase">This is some text</p>
<p id="p3" style="text-transform: capitalize">This is some text</p>


<h2>文本缩进</h2>
<hr>
<p id="p4" style="width: 100%;height: 200px;background-color: lightyellow; text-indent: 50px" >这是个文本,用于指定第一行的缩进数值</p>

</body>

<h2>改变字间距</h2>
<hr>
<p id="p5" style="word-spacing:80px;background-color: lightyellow">用于改变字与字之间的间距,normal默认值为0.但是只是针对英文起作用 This is some text </p>

<h3>改变行间距</h3>
<hr>
<p id="p6" style="background-color: aliceblue;line-height: 300%">
    原始的大部分杀马特都留着五颜六色的长发，画着很浓的妆；穿一些很个性的服装，戴着稀奇古怪的首饰；喜欢自拍，在网吧的摄像头前做些奇怪的动作；自称是：一个集潮流、视觉、杀马特为一系的群体。至于中国的“杀马特”家族，已与摇滚一点关系也没有，只是喜欢模仿视觉系的服饰、化妆罢了；而真正视觉系的FANS们又不屑于与“杀马特”为伍。所以中国的“杀马特”演变至今，既不是VR，也不是纯粹的视觉系。而是一种独特的社会状态、一种生活形式和一股文化潮流。杀马特的起源于20世纪70年代的朋克(Punk)文化，它所代表的是一种另类甚至是怪诞的青年形象，这群另类青年正不停不断挑战大家的审美神经，他们被称为“杀马特家族”。
</p>

<script>
    

    
</script>


</html>